<template>
    <div>
        <h1 style="text-align: center; color:chocolate;">活动显示</h1>
        活动标题<input type="text" v-model="info.name">
        分类<select v-model="info.fenlei">
                            <option value="">请选择</option>
                            <option :value="item.SortName" v-for="item in fft" :key="item.Id">{{item.SortName}}</option>
                            
        </select>
        <button class="btn btn-success" @click="chaxun">查询</button>

        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>序号</td>
                    <td>活动标题</td>
                    <td>分类</td>
                    <td>图片</td>
                    <td>活动日期</td>
                    <td>活动地点</td>
                    <td>报告截止时间</td>
                    <td>活动详情</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in enn" :key="item.Id">
                    <td>{{item.Id}}</td>
                    <td>{{item.Activitytitle}}</td>
                    <td>{{item.Sort}}</td>
                    <td><img :src="item.Picture" width="100" height="100"></td>
                    <td>{{item.ActivityTime }}</td>
                    <td>{{item.Locations}}</td>
                    <td>{{item.CutTime}}</td>
                    <td>{{item.Details}}</td>
                    <td>
                        <button class="btn btn-info" @click="xiugai(item.Id)">修改</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted}from 'vue'
import axios from 'axios';
import { useRouter,useRoute } from 'vue-router';
import moment from 'moment';
const router=useRouter();
const route=useRoute();

let info:any=reactive({
    name:'',
    fenlei:''
})


let fft:any=ref([])

let enn:any=ref([])


//声明周期
onMounted(()=>{
    shuju()
    chaxun()

})

//修改
const xiugai=(id:any)=>{
    router.push({
        path:'/eventsXiugai',
        query:{
            id:id
        }
    })

    
}

//获取活动管理数据
const chaxun=()=>{
    console.log(enn);
    axios({
    url:'/api/Evebts/EventsList',
    method:'get',
    params:info
   }).then(res=>{
    console.log(res);
    enn.value=res.data
    
   }).catch(err=>{
    console.log(err);
    
   })
}


//获取分类数据
const shuju=()=>{
    console.log(fft);
    
   axios({
    url:'/api/Evebts/ClassifiedsList',
    method:'get',
   }).then(res=>{
    console.log(res);
    fft.value=res.data
    
   }).catch(err=>{
    console.log(err);
    
   })
    
}

</script>

<style scoped>

</style>